import React, { PureComponent } from 'react';
import classNames from 'classnames';
import { Menu, Icon, Badge } from 'antd';
import Link from 'umi/link';
import isEqual from 'lodash/isEqual';
import memoizeOne from 'memoize-one';
import { urlToList } from '../_utils/pathTools';
import { getMenuMatches } from './SiderMenuUtils';
import { isUrl } from '@/utils/utils';
import MyIcon from '@/components/MyIcon';
import styles from './index.less';
import { connect } from 'dva';

const { SubMenu } = Menu;

// Allow menu.js config icon as string or ReactNode
//   icon: 'setting',
//   icon: 'http://demo.com/icon.png',
//   icon: <Icon type="setting" />,
const getIcon = icon => {
  if (typeof icon === 'string' && isUrl(icon)) {
    return <img src={icon} alt="icon" className={styles.icon} />;
  }
  if (typeof icon === 'string' && icon.search('icon') === -1) {
    return <Icon type={icon} />;
  }
  if (typeof icon === 'string' && icon.search('icon') > -1) {
    return <MyIcon type={icon} style={{ fontSize: 20 }} />;
  }
  return icon;
};

@connect(({ order, afterSale }) => ({
  workOrderMessageCount: order.workOrderMessageCount,
  abnormalMessageCount: order.abnormalMessageCount,
  afterSaleCount: afterSale.todoCount,
  showRootDot: !!(order.workOrderMessageCount || order.abnormalMessageCount || afterSale.todoCount),
}))
class BaseMenu extends PureComponent {
  constructor(props) {
    super(props);
    this.getSelectedMenuKeys = memoizeOne(this.getSelectedMenuKeys, isEqual);
  }

  /**
   * 获得菜单子节点
   * @memberof SiderMenu
   */
  getNavMenuItems = (menusData, parent) => {
    if (!menusData) {
      return [];
    }
    return menusData
      .filter(item => item.name && !item.hideInMenu)
      .map(item => this.getSubMenuOrItem(item, parent))
      .filter(item => item);

  };

  // Get the currently selected menu
  getSelectedMenuKeys = pathname => {
    const { flatMenuKeys } = this.props;
    return urlToList(pathname).map(itemPath => getMenuMatches(flatMenuKeys, itemPath).pop());
  };

  /**
   * get SubMenu or Item
   */
  getSubMenuOrItem = item => {
    // doc: add hideChildrenInMenu
    const { showRootDot, afterSaleCount } = this.props;

    if (item.children && !item.hideChildrenInMenu && item.children.some(child => child.name)) {
      const { name } = item;
      const offsetY = item.root ? 6 : 0;
      const dot = (name === '客服管理' && showRootDot)
        || (name === '售后管理' && afterSaleCount !== 0);
      const title = (
        <Badge offset={[0, offsetY]} dot={dot}>
          {item.icon && getIcon(item.icon)}
          <span>{name}</span>
        </Badge>
      );
      return (
        <SubMenu
          title={title}
          key={item.path}
        >
          {this.getNavMenuItems(item.children)}
        </SubMenu>
      );
    }
    return <Menu.Item key={item.path}>{this.getMenuItemPath(item)}</Menu.Item>;
  };

  /**
   * 判断是否是http链接.返回 Link 或 a
   * Judge whether it is http link.return a or Link
   * @memberof SiderMenu
   */
  getMenuItemPath = item => {
    const { workOrderMessageCount, abnormalMessageCount, afterSaleCount } = this.props;
    const { name } = item;
    const itemPath = this.conversionPath(item.path);
    const icon = getIcon(item.icon);
    const { target } = item;
    let dot = (name === '工单管理' && workOrderMessageCount !== 0)
      || (name === '异常管理' && abnormalMessageCount !== 0)
      || (name === '客服售后管理' && afterSaleCount !== 0);
    // Is it a http link
    if (/^https?:\/\//.test(itemPath)) {
      return (
        <a href={itemPath} target={target}>
          {icon}
          <span>{name}</span>
        </a>
      );
    }
    const { location, isMobile, onCollapse } = this.props;
    const render = name === '工单管理' || name === '异常管理' ? (<Badge dot={dot}>
      <span>{name}</span>
    </Badge>) : <span>{name}</span>
    return (
      <Link
        to={itemPath}
        target={target}
        replace={itemPath === location.pathname}
        style={{ color: '#fff' }}
        onClick={
          isMobile
            ? () => {
              onCollapse(true);
            }
            : undefined
        }
      >
        {icon}
        <Badge dot={dot}><span>{name}</span></Badge>
      </Link>
    );
  };

  conversionPath = path => {
    if (path && path.indexOf('http') === 0) {
      return path;
    }
    return `/${path || ''}`.replace(/\/+/g, '/');
  };

  render() {
    const {
      openKeys,
      theme,
      mode,
      location: { pathname },
      className,
    } = this.props;
    // if pathname can't match, use the nearest parent's key
    let selectedKeys = this.getSelectedMenuKeys(pathname);
    if (!selectedKeys.length && openKeys) {
      selectedKeys = [openKeys[openKeys.length - 1]];
    }
    let props = {};
    if (openKeys) {
      props = {
        openKeys,
      };
    }
    const { handleOpenChange, style, menuData } = this.props;
    const cls = classNames(className, {
      'top-nav-menu': mode === 'horizontal',
    });

    return (
      <Menu
        key="Menu"
        mode={mode}
        theme={theme}
        onOpenChange={handleOpenChange}
        selectedKeys={selectedKeys}
        style={style}
        className={cls}
        {...props}
      >
        {this.getNavMenuItems(menuData)}
      </Menu>
    );
  }
}

export default BaseMenu
